//点击头部图片返回首页
function logoIndex() {
    let logoObj = document.querySelector('.logo')
    logoObj.onclick = function () {
        location.href = "../pages/index.html"
    }
}
//获取id号
function detailId() {
    let url = location.href
    let index = url.indexOf('?') + 1
    let str = url.substring(index)
    console.log(str);
    let id = str.split('=')[1]
    return id
}
//请求详情页的数据
function dataShow() {
    let id = detailId()
    console.log(id);
    ajax({
        method: 'GET', //请求方法
        url: 'https://www.xiongmaoyouxuan.com/api/detail', //url地址
        data: {
            id: id
        },
        success: function (data) {

            if (data.code == 200) {
                //详情页的数据
                let list = data.data.detail
                //图片数据
                let shoppImg = data.data.share
                detailShow(list, shoppImg)
                //轮播图的数据
                let photo = list.photo
                // photoImg(photo)
                //选项卡数据
                tabMinImg(photo)
                //买家信息数据
                let buyer = data.data.shop
                buyers(buyer)
                let defaObj = data.data.share
                defa(defaObj)
                let decor=data.data.detail.descContentList
                console.log(decor);
                imgShow(decor)
            }
        }
    })
}
// 渲染页面
function detailShow(list, b) {
    let grahicT = document.querySelector('.graphic-m-t')
    let grahicM = document.querySelector('.graphic-m-m')
    let grahicB = document.querySelector('.graphic-m-b')

    let str = `  <p>淘</p>
<span>包邮</span>
<h3>${list.title}</h3>`
    grahicT.innerHTML = str
    let str1 = `<p>原价￥<span>${list.originPrice}</span></p>
<span class="a">券后价￥</span>
<span class="b">${list.price}</span>
<span class="c">${list.couponValue}</span>
<span class="d">${list.saleNum}已买 </span>`
    grahicM.innerHTML = str1
    let str2 = `    <p>优惠有效期：<span>${list.expireDate}</span></p>
<div>    <div class="shoppingCart"><span>加入购物车</span></div>
<div class="view"><span>查看购物车</span></div></div>
    `
    
    grahicB.innerHTML = str2
    let shoppCart = document.querySelector('.shoppingCart')
    let viewObj=document.querySelector('.view')
    console.log(list.id);
    shoppCart.onclick = function () {
        let priceObj = list.price
        let imgUrl = b.imageUrl
        let title = b.title
        let idObj = list.id
        let cart = localStorage.getItem('CART')
        let cartData = JSON.parse(cart) || []
        let num=''
        let product = {
            id: list.id,
            num: 1, //数量
            price: priceObj, //单个商品总价
            img: imgUrl,
            title: title,
            totalprice:priceObj,
                  }
        let newProduct = cartData.find((item) => item.id == product.id)
        if (newProduct) {
            // 3.1如果已经存在，改变商品数量
            newProduct.num++
            newProduct.totalprice=(newProduct.num*newProduct.price)
        } else {
            //3.2如果不存在，添加一项商品
            cartData.push(product)
        }
        localStorage.setItem('CART', JSON.stringify(cartData))
    
       
    }
    //点击查看购物车跳转页面
viewObj.onclick=function(){
    location.href = "../pages/shoppingCart.html"
}
}
//渲染轮播图
function photoImg(p) {
    let wrapperObj = document.querySelector('.swiper-wrapper')
    let str = ''
    p.forEach(v => {
        str += ` <div class="swiper-slide">
      <img src=${v.url} width="310px" height="280px">
      </div>`
    })
    wrapperObj.innerHTML = str
    new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    })
}
//tab选项卡渲染
function tabMinImg(photo) {
    // let minImgObj=document.querySelector('.minImg')
    let ulObj = document.querySelector('.minImg ul')
    photo.forEach(v => {
        let liObj = document.createElement('li')
        let str = ` <img src=${v.url} width="50px" height="50px">`
        ulObj.appendChild(liObj)
        liObj.innerHTML = str
        liObj.onclick = function () {

            let maskImg = document.querySelector('.maskImg img')
            let maxImg = document.querySelector('.maxdiv img')
            maskImg.src = `${v.url}`
            maxImg.src = `${v.url}`
            console.log(v.url);
        }

    })
}
//tab默认第一张图片
function defa(a) {
    let maskImg = document.querySelector('.maskImg img')
    let maxImg = document.querySelector('.maxdiv img')

    console.log(a.imageUrl);
    maskImg.src = a.imageUrl
    maxImg.src = a.imageUrl
}
//放大镜
function magnifying() {
    let maskImgOBj = document.querySelector('.maskImg')
    let maskObj = document.querySelector('.mask')
    let maxdivObj = document.querySelector('.maxdiv')
    let maxImgObj = document.querySelector('.maxImg')
    //计算图片的大小
    function setScale() {
        maxImgObj.style.width =
            (maxdivObj.offsetWidth * maskImgOBj.offsetWidth) /
            maskObj.offsetWidth +
            'px'
        maxImgObj.style.height =
            (maxdivObj.offsetHeight * maskImgOBj.offsetHeight) /
            maskObj.offsetHeight +
            'px'
    }
    //移入进去显示
    maskImgOBj.onmouseover = function () {
        maskObj.style.display = 'block'
        maxdivObj.style.display = 'block'
        setScale()
    }
    //移出隐藏
    maskImgOBj.onmouseout = function () {
        maskObj.style.display = 'none'
        maxdivObj.style.display = 'none'
    }
    maskImgOBj.onmousemove = function (e) {
        e = e || window.event
        let x = e.offsetX - maskObj.offsetWidth / 2
        let y = e.offsetY - maskObj.offsetHeight / 2
        if (x < 0) x = 0
        if (y < 0) y = 0
        if (x > maskImgOBj.offsetWidth - maskObj.offsetWidth) x = maskImgOBj.offsetWidth - maskObj.offsetWidth
        if (y > maskImgOBj.offsetHeight - maskObj.offsetHeight) y = maskImgOBj.offsetHeight - maskObj.offsetHeight
        maskObj.style.top = y + 'px'
        maskObj.style.left = x + 'px'
        let moveX = (x * maxdivObj.offsetWidth) / maskObj.offsetWidth
        let moveY = (y * maxdivObj.offsetHeight) / maskObj.offsetHeight
        maxImgObj.style.left = -moveX + 'px'
        maxImgObj.style.top = -moveY + 'px'
    }
}
//买家信息渲染
function buyers(a) {
    let buyersImg = document.querySelector('.graphic-r .a')
    let buyersText = document.querySelector('.graphic-r .text')
    let str = `<img src=${a.coverUrl} alt="">`
    let str1 = `     <h3>${a.nickname}</h3>`
    buyersImg.innerHTML = str
    buyersText.innerHTML = str1
}
//图片展示
function imgShow(b){
let imgS=document.querySelector('.imgShow')
console.log(imgS);
let str=''
b.forEach(v=>{
    console.log(v.image);
    console.log();
    str+=`  <div><img src=${v.image.url}>
    </div>`
    imgS.innerHTML=str
})
}

magnifying()
logoIndex()
dataShow()